import React from 'react';
import style from './style.styl';
import {Button, Input, Select, error, AutosaveTextarea} from '../../../../ui-components';
import {util} from '../../../../util';
import cx from 'classnames';

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as reviewAction from '../../../../actions/review.action' 

@connect(null, dispatch => ({actions: bindActionCreators({...reviewAction}, dispatch)}))
class SelfQuestion extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'SelfQuestion';
    this.state = {
      revieweeState: [],
    }
  }
  goPrevious = () => {
    this.props.tabRouter(1);
  }
  checkChange = () => {
    return !~this.state.revieweeState.findIndex(v => v.item && v.item.isChange);
  }
  goNext = () => {
    const {
      question
    } = this.props;
    if(!this.checkChange()) {
      this.state.revieweeState.map(v => {
        if(!v.item.value){
          return error('填写项不可为空');
        }
        if(v.item && v.item.isChange)
          this.refs[`reviewee-${v.questionId}`].props.onSave(v.item.value);
        if(this.checkChange()) {
          this.props.tabRouter(3);
        }
      });
    }else{
      if(~this.props.question.findIndex(v => (!v.revieweeComment || !v.revieweeComment.content) 
        && !~this.state.revieweeState.findIndex(k => k.questionId === v.questionId))){
        return error('填写项不可为空');
      }
      this.props.tabRouter(3);
    }
  }
  setRevieweeComment = (questionId, commentId, value) => {
    if(commentId){
      this.props.actions.updateRevieweeComment(this.props.activityId, questionId, commentId, {content: value});
    }else
      this.props.actions.addRevieweeComment(this.props.activityId, questionId, {content: value});    
  }
  setRevieweeCommentState = (questionId, commentId, item) => {
    const {
      revieweeState,
    } = this.state;
    const commentItem = revieweeState.filter(v => v.questionId === questionId);
    if(commentItem.length){
      this.setState({
        revieweeState: revieweeState.map(v => {
          if(v.questionId === questionId){
            return {
              ...v,
              commentId,
              item,
            }
          }else{
            return v;
          }
        })
      });
    }else{
      this.setState({
        revieweeState: [
          ...revieweeState,
          {
            questionId,
            commentId,
            item,
          }
        ]
      });
    }
  }
  saveAll = () => {
    const {
      revieweeState,
    } = this.state;
    revieweeState.map(v => {
      if(v.item && v.item.isChange){
        this.refs[`reviewee-${v.questionId}`].onSave(v.item.value);
      }
    });
  }
  render() {
    const {
      question
    } = this.props;
    const {
      revieweeState,
    } = this.state;
    const flag = this.checkChange();
    return (
      <div>
        <div>
          {
            question.map((v,i) => {
              return (
                <div className={style['question-box']} key={i}>
                  <div className={style['question-title']}>{v.name}</div>
                  <AutosaveTextarea value={(v.revieweeComment || {}).content} 
                    ref={`reviewee-${v.questionId}`}
                    onSave={(value) => {this.setRevieweeComment(v.questionId,(v.revieweeComment || {}).commentId, value)}} 
                    onChange={(item) => {this.setRevieweeCommentState(v.questionId,(v.revieweeComment || {}).commentId, item)}} 
                  />
                </div>
              );
            })
          }
        </div>
        <div className={style['btn-bar']}>
          <Button label={'上一步'} className={style['l-btn']} onClick={this.goPrevious} />
          <Button label={'保存,继续下一步'} className={style['r-btn']} onClick={this.goNext} />
          <Button label={'保存草稿'} className={cx({
            [style['r-btn']]: true,
            [style['bl-dis']]: flag,
          })} blueLine onClick={() => {!flag && this.saveAll()}} />
        </div>
      </div>
    );
  }
}

export default SelfQuestion;
